<template>
  <div class=" container" >
        <div class="my_table">
            <el-table :data="List3.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
            style="{width: '100%',background-color:'#10254a'}" :header-cell-style= "{color: '#edef5c',height: '40px',background:'#10254a'}" 
            row-class-name="rows"
            :cell-style="columncolorStyle">
        <el-table-column
            prop="type"
            label="报警类型"
            width="180"
            align="center">
        </el-table-column>
        <el-table-column
            prop="date"
            label="报警时间"
            width="180"
            align="center">
        </el-table-column>
        <el-table-column
            prop="img"
            label="图片URL"
            width="180"
            align="center"
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <el-popover
                    placement="right"
                    title=""
                    trigger="click">
                    <el-image slot="reference" 
                    :src="scope.row.imgPath"
                    :alt="scope.row.name"
                    style="max-height: 200px;max-width: 200px">
                    </el-image>
                    <el-image :src="scope.row.imgPath"></el-image>
            </el-popover>
            </template>
        </el-table-column>
        <el-table-column
            prop="number"
            label="摄像头编号"
            align="center">
        </el-table-column>
        <el-table-column
            prop="name"
            label="摄像头名称"
            align="center">
        </el-table-column>
        <el-table-column
            prop="confidence"
            label="置信度"
            align="center">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="120">
            <template slot-scope="scope">
                <el-button
                @click.native.prevent="deleteRow(scope.$index, List1)"
                type="text"
                size="small">
                <div class="change_icon"><i class="el-icon-circle-close"></i></div>
                </el-button>
            </template>
        </el-table-column>
    </el-table>
        </div>
        <div class="row">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="List3.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name:'Edgealarm',
    data(){ 
        return {
        List3:[],
            currentPage: 1, //  el-pagination 初始页
            pagesize: 10, //  el-pagination 每页的数据
        }
    },
    created() { 
        this.getUserList3()    
    },
    methods:{
        getUserList3() {
            this.$http.get("http://localhost:9090/edgeAlarm/getAll")
                .then(response =>{
                    this.List3 = response.data.data
                    console.log(this.List3)
                }) 
                .catch(error =>{
                }) 
        },
        handleSizeChange: function(size) {
            this.pagesize = size
            console.log(this.pagesize) // 每页下拉显示数据
        },
        handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage
        console.log(this.currentPage) // 点击第几页
        },
        columncolorStyle({row,column,rowIndex,columnIndex}){
            if(row){
                return 'background:#10254a'
            }
            //  if(columnIndex==0){        
            //     return 'color:#ad6066'
            // }
        },
        timer3() {
            return setTimeout(()=>{
                this.getUserList3()
            },5000)
        },
    },
    watch: {
        List3() {
            this.timer3()  
        }
    },
    destroyed() {
        clearTimeout(this.timer3)
    } 

}
</script>

<style scoped>
 @media screen and (min-width:1280px) {
    .container{
        position: relative;
        width:1280px;
    }
}
.my_table >>> .el-table__row>td{
  /* 去除表格线 */
  border: none;
}
.row{
    height:120px;
    color:#fff;
}
.change_icon{
    font-size: 20px;
}
</style>